<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/logo.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/logo.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/logo.png">
  <link rel="mask-icon" href="/images/logo.png" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"gitee.com","root":"/","scheme":"Pisces","version":"7.7.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"./public/search.xml"};
  </script>

  <meta name="description" content="包含有常用的基础知识和项目开发的流程知识">
<meta property="og:type" content="article">
<meta property="og:title" content="微信小程序最佳实践">
<meta property="og:url" content="https://gitee.com/mamba666/mamba666.git/2020/08/10/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/index.html">
<meta property="og:site_name" content="共你云雨">
<meta property="og:description" content="包含有常用的基础知识和项目开发的流程知识">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/images/51.png">
<meta property="og:image" content="https://gitee.com/images/54.png">
<meta property="og:image" content="https://gitee.com/images/55.png">
<meta property="article:published_time" content="2020-08-10T06:59:14.622Z">
<meta property="article:modified_time" content="2020-09-17T06:37:26.323Z">
<meta property="article:author" content="Edison">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/images/51.png">

<link rel="canonical" href="https://gitee.com/mamba666/mamba666.git/2020/08/10/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true
  };
</script>

  <title>微信小程序最佳实践 | 共你云雨</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
	<a href="https://github.com/mamba666" target="_blank" rel="noopener" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">共你云雨</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
  </ul>

</nav>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://gitee.com/mamba666/mamba666.git/2020/08/10/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Edison">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="共你云雨">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          微信小程序最佳实践
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-08-10 14:59:14" itemprop="dateCreated datePublished" datetime="2020-08-10T14:59:14+08:00">2020-08-10</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-09-17 14:37:26" itemprop="dateModified" datetime="2020-09-17T14:37:26+08:00">2020-09-17</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/" itemprop="url" rel="index"><span itemprop="name">最佳实践</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>包含有常用的基础知识和项目开发的流程知识</p>
<a id="more"></a>

<h1 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h1><h2 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h2><blockquote>
<p>配置文件分为全局配置文件和页面自己的配置文件。</p>
</blockquote>
<h3 id="全局配置文件"><a href="#全局配置文件" class="headerlink" title="全局配置文件"></a>全局配置文件</h3><blockquote>
<p>小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。</p>
</blockquote>
<p>以下是默认的app.json。<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html" target="_blank" rel="noopener">详情看文档</a></p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"><span class="comment">// 用来放页面</span></span><br><span class="line">  <span class="attr">"pages"</span>:[</span><br><span class="line">    <span class="string">"pages/index/index"</span>,</span><br><span class="line">    <span class="string">"pages/logs/logs"</span></span><br><span class="line">  ],</span><br><span class="line"><span class="comment">// 全局的默认窗口表现</span></span><br><span class="line">  <span class="attr">"window"</span>:&#123;</span><br><span class="line">  	<span class="comment">// 下拉 loading 的样式，仅支持 dark / light</span></span><br><span class="line">    <span class="attr">"backgroundTextStyle"</span>:<span class="string">"light"</span>,</span><br><span class="line">    <span class="comment">// 导航栏背景颜色，如 #000000</span></span><br><span class="line">    <span class="attr">"navigationBarBackgroundColor"</span>: <span class="string">"#fff"</span>,</span><br><span class="line">    <span class="comment">// 导航栏标题文字内容</span></span><br><span class="line">    <span class="attr">"navigationBarTitleText"</span>: <span class="string">"Weixin"</span>,</span><br><span class="line">    <span class="comment">// 导航栏标题颜色，仅支持 black / white</span></span><br><span class="line">    <span class="attr">"navigationBarTextStyle"</span>:<span class="string">"black"</span></span><br><span class="line">  &#125;,</span><br><span class="line"><span class="comment">// 指定使用升级后的weui样式</span></span><br><span class="line">  <span class="attr">"style"</span>: <span class="string">"v2"</span>,</span><br><span class="line"><span class="comment">// 指明 sitemap.json 的位置</span></span><br><span class="line">  <span class="attr">"sitemapLocation"</span>: <span class="string">"sitemap.json"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="tabBar"><a href="#tabBar" class="headerlink" title="tabBar"></a>tabBar</h4><blockquote>
<p>如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。</p>
</blockquote>
<p><img src="/images/51.png" alt></p>
<h3 id="页面配置文件"><a href="#页面配置文件" class="headerlink" title="页面配置文件"></a>页面配置文件</h3><blockquote>
<p>每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。</p>
</blockquote>
<h3 id="sitemap"><a href="#sitemap" class="headerlink" title="sitemap"></a>sitemap</h3><blockquote>
<p>微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。</p>
</blockquote>
<h2 id="WXML语法"><a href="#WXML语法" class="headerlink" title="WXML语法"></a>WXML语法</h2><ul>
<li><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/" target="_blank" rel="noopener">文档详情</a></li>
</ul>
<h3 id="数据绑定"><a href="#数据绑定" class="headerlink" title="数据绑定"></a>数据绑定</h3><blockquote>
<p>WXML 中的动态数据均来自对应 Page 的 data。</p>
</blockquote>
<p>一般有三种写法：</p>
<ul>
<li>普通写法</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span>&gt;</span> &#123;&#123; message &#125;&#125; <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Page(&#123;</span><br><span class="line">  data: &#123;</span><br><span class="line">    message: <span class="string">'Hello MINA!'</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>组件的属性中</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">id</span>=<span class="string">"item-&#123;&#123;id&#125;&#125;"</span>&gt;</span> <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Page(&#123;</span><br><span class="line">  data: &#123;</span><br><span class="line">    id: <span class="number">0</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>布尔类型</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 如果这里没有双引号，那么false就只代表一个字符串，而不是一个布尔值 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">checkbox</span> <span class="attr">checked</span>=<span class="string">"&#123;&#123;false&#125;&#125;"</span>&gt;</span> <span class="tag">&lt;/<span class="name">checkbox</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="运算"><a href="#运算" class="headerlink" title="运算"></a>运算</h3><blockquote>
<p>可以在双花括号内进行简单的运算</p>
</blockquote>
<ul>
<li>三元运算</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">hidden</span>=<span class="string">"&#123;&#123;flag ? true : false&#125;&#125;"</span>&gt;</span> Hidden <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>算数运算</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span>&gt;</span> &#123;&#123;a + b&#125;&#125; + &#123;&#123;c&#125;&#125; + d <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Page(&#123;</span><br><span class="line">  data: &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    b: <span class="number">2</span>,</span><br><span class="line">    c: <span class="number">3</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>逻辑判断</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:if</span>=<span class="string">"&#123;&#123;length &gt; 5&#125;&#125;"</span>&gt;</span> <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>字符串运算</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span>&gt;</span>&#123;&#123;"hello" + name&#125;&#125;<span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Page(&#123;</span><br><span class="line">  data:&#123;</span><br><span class="line">    name: <span class="string">'MINA'</span></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>注意</li>
</ul>
<p><strong>双花括号和引号之间如果存在空格，那么这个空格也会被解析成为字符串</strong></p>
<h3 id="列表渲染"><a href="#列表渲染" class="headerlink" title="列表渲染"></a>列表渲染</h3><p>类似于vue</p>
<ul>
<li>wx:for</li>
</ul>
<blockquote>
<p>在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的<strong>下标变量名</strong>默认为 index，数组当前项的<strong>变量名</strong>默认为 item</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">"&#123;&#123;array&#125;&#125;"</span>&gt;</span></span><br><span class="line">  &#123;&#123;index&#125;&#125;: &#123;&#123;item.message&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Page(&#123;</span><br><span class="line">  data: &#123;</span><br><span class="line">    array: [&#123;</span><br><span class="line">      message: <span class="string">'foo'</span>,</span><br><span class="line">    &#125;, &#123;</span><br><span class="line">      message: <span class="string">'bar'</span></span><br><span class="line">    &#125;]</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>既然有默认的值，那么肯定可以自定义数组的下标名和数组每一项的名。</p>
<ol>
<li>使用 wx:for-item 可以指定数组当前元素的变量名</li>
<li>使用 wx:for-index 可以指定数组当前下标的变量名</li>
</ol>
<ul>
<li>block wx:for</li>
</ul>
<blockquote>
<p>渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">block</span> <span class="attr">wx:for</span>=<span class="string">"&#123;&#123;[1, 2, 3]&#125;&#125;"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">view</span>&gt;</span> &#123;&#123;index&#125;&#125;: <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">view</span>&gt;</span> &#123;&#123;item&#125;&#125; <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">block</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:for</span>=<span class="string">"&#123;&#123;[1, 2, 3]&#125;&#125;"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">view</span>&gt;</span> &#123;&#123;index&#125;&#125;: <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">view</span>&gt;</span> &#123;&#123;item&#125;&#125; <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>第一个代码使用了block，第二个没有使用block。根据下面的图就能很好的理解这句话：<strong>渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素</strong></p>
<p>!()[/images/53.png]<br>!()[/images/52.png]</p>
<ul>
<li>wx:key</li>
</ul>
<blockquote>
<p>如果列表中<strong>项目的位置会动态改变</strong>或者<strong>有新的项目添加到列表中</strong>，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。</p>
</blockquote>
<p>wx:key的值有两种形式：</p>
<ol>
<li>字符串形式：代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。</li>
<li>保留关键字 *this ：代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。</li>
</ol>
<h3 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h3><ul>
<li>wx:if</li>
</ul>
<p>在框架中，使用 wx:if=”” 来判断是否需要渲染该代码块：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:if</span>=<span class="string">"&#123;&#123;condition&#125;&#125;"</span>&gt;</span> True <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>还可以使用判断逻辑</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:if</span>=<span class="string">"&#123;&#123;length &gt; 5&#125;&#125;"</span>&gt;</span> 1 <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:elif</span>=<span class="string">"&#123;&#123;length &gt; 2&#125;&#125;"</span>&gt;</span> 2 <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">wx:else</span>&gt;</span> 3 <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>block wx:if</li>
</ul>
<p>因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。</block></p>
<p>要特别注意，block实际上并不是一个组件，它仅仅的作用就是将它的子元素包裹起来，页面也不会对它渲染，并且它只接受控制属性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">block</span> <span class="attr">wx:if</span>=<span class="string">"&#123;&#123;true&#125;&#125;"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">view</span>&gt;</span> view1 <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">view</span>&gt;</span> view2 <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">block</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>hidden</li>
</ul>
<p>类似于vue的v-show，使用hidden的组件始终会被渲染，只是通过css去控制是否被显示。所以如果组件需要频繁的切换，就是用hidden；如果只是偶尔切换，就是用wx:if</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">hidden</span>=<span class="string">"&#123;&#123;condition&#125;&#125;"</span>&gt;</span> True <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h2><p>⼩程序中绑定事件，通过bind关键字来实现。如 bindtap、bindinput、bindchange 等。不同的组件⽀持不同的事件，具体看组件的说明即可。</p>
<ol>
<li><a href="https://developers.weixin.qq.com/miniprogram/dev/component/" target="_blank" rel="noopener">组件文档详情</a></li>
<li><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html" target="_blank" rel="noopener">事件文档详情</a></li>
</ol>
<p>以 input 的 bindinput（当键盘输入时触发） 举例子：当使用键盘输入时，会触发 bindinput 事件，然后 bindinput 会触发 bindInput 函数，然后会在控制台打印 bindinput 。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">class</span>=<span class="string">"input"</span> <span class="attr">bindinput</span>=<span class="string">'bindInput'</span> <span class="attr">data-num1</span>=<span class="string">"1"</span> <span class="attr">data-num2</span>=<span class="string">"2"</span>&gt;</span><span class="tag">&lt;/<span class="name">input</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.input</span>&#123;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid black;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Page(&#123;</span><br><span class="line">  data:&#123;&#125;,</span><br><span class="line">  bindInput:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">  	<span class="built_in">console</span>.log(e)</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"bindinput"</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>以上代码需要注意的是，<strong>绑定事件时不能带参数，不能带括号</strong>。那么写参数就有学问了。</p>
<ol>
<li>先看代码中的参数：data-num1=”1” data-num2=”2” 。只要是参数，前面就要加 data- ，那么参数实际上就是 num1 num2 。</li>
<li>另外一点是参数的值必须被 “” 包裹起来，不然会报错。</li>
<li>如何在 js 文件中拿到参数呢？这就需要 e 帮忙了。通 e.currentTarget.dataset 就可以获取到所有的参数了。</li>
<li>e究竟打印了什么呢？请看下图:<img src="/images/54.png" alt></li>
</ol>
<h2 id="WXSS语法"><a href="#WXSS语法" class="headerlink" title="WXSS语法"></a>WXSS语法</h2><p>一套css规则，专用于微信小程序，称为wxss。<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html" target="_blank" rel="noopener">详情文档</a></p>
<ul>
<li>尺寸单位</li>
</ul>
<p>微信规定了屏幕宽度为750rpx，iphone宽度刚刚好为375px，所以两者换算关系很简单，即1px=2rpx。这也是为什么设计稿要使用 iphone6 来设计的原因。</p>
<ul>
<li>样式导入</li>
</ul>
<p>使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。</p>
<p>现在全局样式 app.wxss 需要引入局部样式 index.wxss，具体做法如下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** index.wxss **/</span></span><br><span class="line"><span class="selector-class">.small</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>:<span class="number">5px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** app.wxss **/</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">"./pages/index/index.wxss"</span>;</span><br><span class="line"><span class="selector-class">.middle</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>:<span class="number">15px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>还有一点，页面样式会覆盖和全局样式相同的部分</strong></p>
<ul>
<li>使用less</li>
</ul>
<p>原生小程序框架是不支持 less 的，虽然其他框架（taro、mpvue）等支持 less ，但是为了一个 less 而去引用框架不可取。</p>
<p>使用 less 步骤 （vscode环境）：</p>
<ol>
<li>安装插件 easy less</li>
<li>在vs code的设置中加⼊如下，配置<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">"less.compile": &#123;</span><br><span class="line">       "outExt":".wxss"</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li>
<li>在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。</li>
</ol>
<h2 id="自定义组件"><a href="#自定义组件" class="headerlink" title="自定义组件"></a>自定义组件</h2><blockquote>
<p>开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。</p>
</blockquote>
<p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/" target="_blank" rel="noopener">自定义组件文档详情</a></p>
<h3 id="创建一个自定义组件"><a href="#创建一个自定义组件" class="headerlink" title="创建一个自定义组件"></a>创建一个自定义组件</h3><ol>
<li>先在 pages 文件夹中新建目录 com，然后直接在 com 文件夹上右键新建 Component。然后在 com.json 中可以看到<code>&quot;component&quot;: true</code>：将 component 字段设为 true 可将这一组文件设为自定义组件。</li>
<li>然后在 wxml wxss 中分别写。<em>注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。</em><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span> <span class="attr">class</span>=<span class="string">"inner"</span>&gt;</span></span><br><span class="line">  &#123;&#123;innerText&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.inner</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>页面和样式编写完后，就可以开始写 js 了。<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">Component(&#123;</span><br><span class="line">  properties: &#123;</span><br><span class="line">    <span class="comment">// 这里定义了innerText属性，属性值可以在组件使用时指定</span></span><br><span class="line">    innerText: &#123;</span><br><span class="line">      type: <span class="built_in">String</span>,</span><br><span class="line">      value: <span class="string">'default value'</span>,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data: &#123;</span><br><span class="line">    <span class="comment">// 这里是一些组件内部数据</span></span><br><span class="line">    someData: &#123;&#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    <span class="comment">// 这里是一个自定义方法</span></span><br><span class="line">    customMethod: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h3 id="使用自定义组件"><a href="#使用自定义组件" class="headerlink" title="使用自定义组件"></a>使用自定义组件</h3><p>在上面完成了自定义组件的编写后，就需要在其他需要使用的页面中使用这个自定义组件。</p>
<ol>
<li>首先要在页面的 json 中声明引入的自定义组件。这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"> <span class="comment">// 引用声明</span></span><br><span class="line">  <span class="attr">"usingComponents"</span>: &#123;</span><br><span class="line"> <span class="comment">// 要使用的组件的名称     // 组件的路径</span></span><br><span class="line">    <span class="attr">"com"</span>:<span class="string">"/pages/com/com"</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li>现在可以开始在页面用引用自定义组件了。在 com.js 中定义的 properties 就是这个组件的自定义属性。 如果没有<code>innerText=&quot;value&quot;</code>，那么就会显示默认的 value 值<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">view</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">com</span> <span class="attr">innerText</span>=<span class="string">"value"</span>&gt;</span><span class="tag">&lt;/<span class="name">com</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br></pre></td></tr></table></figure>

</li>
</ol>
<h2 id="小程序生命周期"><a href="#小程序生命周期" class="headerlink" title="小程序生命周期"></a>小程序生命周期</h2><p><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html" target="_blank" rel="noopener">页面生命周期文档详情</a></p>
<h2 id="应用生命周期"><a href="#应用生命周期" class="headerlink" title="应用生命周期"></a>应用生命周期</h2><ul>
<li>有一个小细节，在之前有了<code>app.js</code> <code>index.js</code> <code>com.js</code>三个不同页面的 js 文件。细心一点其实他们最外面的方法都不同。首先是 app.js ，他的最外面是 APP，index.js 最外面是Page，com.js 最外面是 Component。</li>
</ul>
<h1 id="项目"><a href="#项目" class="headerlink" title="项目"></a>项目</h1><h2 id="项目搭建"><a href="#项目搭建" class="headerlink" title="项目搭建"></a>项目搭建</h2><h3 id="技术选型"><a href="#技术选型" class="headerlink" title="技术选型"></a>技术选型</h3><p>在框架的选型上，现阶段有很多，例如 taro、mpvue、uni-app等等，这次使用微信原生框架。后续在使用uni-app重构。</p>
<h3 id="具体步骤"><a href="#具体步骤" class="headerlink" title="具体步骤"></a>具体步骤</h3><ol>
<li>首先搭建一个小程序，并且填入自己的appid</li>
<li>对目录做调整，以使得项目的结构变得清晰</li>
</ol>
<ul>
<li>在对 app.json 做格式化时，可以使用 wx-app 快捷指令快速生成默认的简洁代码</li>
<li>同理，还有 wx-page 可以快速生成页面的默认简洁代码</li>
</ul>
<ol start="3">
<li>一个微信小程序有很多和页面，可以先统一创建文件夹，也可以做一个创建一个</li>
<li>引入 iconfont 字体库，使用 font-class 形式引用</li>
<li>搭建tabBar。有一点需要注意，tabBar里面的颜色必须是<code>#ffffff</code>这种形式。</li>
</ol>
<h3 id="样式的初始化"><a href="#样式的初始化" class="headerlink" title="样式的初始化"></a>样式的初始化</h3><p>一般样式的初始化就是提取出项目的主颜色，还有一些边框等等的属性。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**app.wxss**/</span></span><br><span class="line"><span class="comment">/* 引入 iconfont 文件 */</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">'./styles/iconfont.wxss'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 不支持通配符 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 主题颜色通过变量实现</span></span><br><span class="line"><span class="comment">1. less中存在变量</span></span><br><span class="line"><span class="comment">2. 原生的css和wxss也支持变量 */</span></span><br><span class="line"><span class="selector-tag">page</span>,</span><br><span class="line"><span class="selector-tag">view</span>,</span><br><span class="line"><span class="selector-tag">text</span>,</span><br><span class="line"><span class="selector-tag">swiper</span>,</span><br><span class="line"><span class="selector-tag">swiper-item</span>,</span><br><span class="line"><span class="selector-tag">navigator</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border;</span><br><span class="line">  <span class="comment">/* 主题颜色,使用变量 */</span></span><br><span class="line">  <span class="attribute">--themeColor</span>: <span class="number">#eb4450</span>;</span><br><span class="line">  <span class="comment">/* 定义统一的字体大小 1px=2rpx */</span></span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">28</span>rpx;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>那么如何使用<code>--themeColor</code>呢？</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**index.wxss**/</span></span><br><span class="line"><span class="selector-tag">view</span> &#123;</span><br><span class="line">  <span class="comment">/* 使用主题颜色 */</span></span><br><span class="line">  <span class="attribute">color</span>: <span class="built_in">var</span>(--themeColor)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="商品首页"><a href="#商品首页" class="headerlink" title="商品首页"></a>商品首页</h2><p>先来看看首页的布局，可以将其拆分成四个部分：搜索、轮播、导航、主体内容</p>
<p><img src="/images/55.png" alt></p>
<h3 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h3><ul>
<li>搜索功能并不是只存在于首页，在其他页面也会存在，所以将其做成<code>自定义组件</code>。</li>
<li>再点击搜索框之后，会跳转到一个搜索的页面</li>
</ul>
<ol>
<li>在 components文件夹中创建 SearchInput 文件夹</li>
<li>在生成4个默认文件后，开始在首页引入这个自定义组件（之前有过介绍）</li>
<li>开始编写 SearchInput 自定义组件</li>
</ol>
<p>由于是超链接需要跳转，所以用到了 navigator 组件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">navigator</span> <span class="attr">class</span>=<span class="string">""</span> <span class="attr">target</span>=<span class="string">""</span> <span class="attr">url</span>=<span class="string">"/pages/search/index"</span> <span class="attr">hover-class</span>=<span class="string">"navigator-hover"</span> <span class="attr">open-type</span>=<span class="string">"navigate"</span>&gt;</span></span><br><span class="line">  搜索商品</span><br><span class="line"><span class="tag">&lt;/<span class="name">navigator</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>在使用搜索的 iconfont 时，试过了所有的方法，但是都不能在自定义组件中生效，初步判定为 iconfont 不能在自定义组件中使用。</li>
</ul>
<h3 id="轮播"><a href="#轮播" class="headerlink" title="轮播"></a>轮播</h3><ul>
<li>轮播图都是通过后端接口获取的，而不是直接在 wxml 上直接使用轮播图，这就涉及到了微信小程序接口知识</li>
</ul>
<p><a href="https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html" target="_blank" rel="noopener">网络请求文档详情</a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 页面加载就触发，适用于发送请求</span></span><br><span class="line">onLoad: <span class="function"><span class="keyword">function</span> (<span class="params">options</span>) </span>&#123;</span><br><span class="line">  wx.request(&#123;</span><br><span class="line">    <span class="comment">//开发者服务器接口地址</span></span><br><span class="line">    url: <span class="string">'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'</span>,</span><br><span class="line">    <span class="comment">//请求的参数</span></span><br><span class="line">    data: &#123;&#125;,</span><br><span class="line">    <span class="comment">//设置请求的 header，header 中不能设置 Referer。content-type 默认为 application/json</span></span><br><span class="line">    header: &#123; <span class="string">'content-type'</span>: <span class="string">'application/json'</span> &#125;,</span><br><span class="line">    <span class="comment">//HTTP 请求方法</span></span><br><span class="line">    method: <span class="string">'GET'</span>,</span><br><span class="line">    <span class="comment">//返回的数据格式</span></span><br><span class="line">    dataType: <span class="string">'json'</span>,</span><br><span class="line">    <span class="comment">//响应的数据类型</span></span><br><span class="line">    responseType: <span class="string">'text'</span>,</span><br><span class="line">    <span class="comment">//接口调用成功的回调函数</span></span><br><span class="line">    success: <span class="function">(<span class="params">result</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">this</span>.setData(&#123;</span><br><span class="line">    		swiperList: result.data.message</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//接口调用失败的回调函数</span></span><br><span class="line">    fail: <span class="function"><span class="params">()</span> =&gt;</span> &#123; &#125;,</span><br><span class="line">    <span class="comment">//接口调用结束的回调函数（调用成功、失败都会执行）</span></span><br><span class="line">    complete: <span class="function"><span class="params">()</span> =&gt;</span> &#123; &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li>开始轮播图</li>
</ul>
<p>轮播图都要使用 wx:for 去循环渲染，swiperList 直接获取到了数组数据，然后设置一个 key 值。然后每一项都是 item ，就可以直接通过 item.image_src 去使用数据了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">swiper</span> <span class="attr">indicator-dots</span>=<span class="string">"true"</span> <span class="attr">indicator-color</span>=<span class="string">"true"</span> <span class="attr">indicator-color</span>=<span class="string">"#AE5E63"</span> <span class="attr">indicator-active-color</span>=<span class="string">"#fff"</span> <span class="attr">autoplay</span>=<span class="string">"true"</span> <span class="attr">interval</span>=<span class="string">"3000"</span> <span class="attr">duration</span>=<span class="string">"1000"</span> <span class="attr">circular</span>=<span class="string">"true"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">swiper-item</span> <span class="attr">wx:for</span>=<span class="string">"&#123;&#123;swiperList&#125;&#125;"</span> <span class="attr">wx:key</span>=<span class="string">"goods_id"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">navigator</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">image</span> <span class="attr">src</span>=<span class="string">"&#123;&#123;item.image_src&#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">image</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">navigator</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">swiper-item</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">swiper</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="通过-promise-优化网络请求"><a href="#通过-promise-优化网络请求" class="headerlink" title="通过 promise 优化网络请求"></a>通过 promise 优化网络请求</h4><p>之前的网络请求代码比较臃肿，这里在 request 文件夹中封装一个网络请求的函数</p>
<ul>
<li>request/index.js</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> request=<span class="function">(<span class="params">params</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">    wx.request(&#123;</span><br><span class="line">      ...params,</span><br><span class="line">      success:<span class="function"><span class="params">result</span>=&gt;</span>&#123;</span><br><span class="line">        resolve(result)</span><br><span class="line">      &#125;,</span><br><span class="line">      fail:<span class="function"><span class="params">err</span>=&gt;</span>&#123;</span><br><span class="line">        reject(err)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>pages/index/index.js 优化之后</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">onLoad: <span class="function"><span class="keyword">function</span> (<span class="params">options</span>) </span>&#123;</span><br><span class="line">  request(&#123;<span class="attr">url</span>:<span class="string">"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"</span>&#125;).then(<span class="function"><span class="params">result</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.setData(&#123;</span><br><span class="line">      swiperList:result.data.message</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>

<h3 id="导航"><a href="#导航" class="headerlink" title="导航"></a>导航</h3><h3 id="主体内容"><a href="#主体内容" class="headerlink" title="主体内容"></a>主体内容</h3><h2 id="商品列表"><a href="#商品列表" class="headerlink" title="商品列表"></a>商品列表</h2><h2 id="购物车"><a href="#购物车" class="headerlink" title="购物车"></a>购物车</h2><h2 id="授权页面"><a href="#授权页面" class="headerlink" title="授权页面"></a>授权页面</h2><h2 id="商品搜索"><a href="#商品搜索" class="headerlink" title="商品搜索"></a>商品搜索</h2><h2 id="商品收藏"><a href="#商品收藏" class="headerlink" title="商品收藏"></a>商品收藏</h2><h2 id="商品分类"><a href="#商品分类" class="headerlink" title="商品分类"></a>商品分类</h2><h2 id="商品详情"><a href="#商品详情" class="headerlink" title="商品详情"></a>商品详情</h2><h2 id="结算页面"><a href="#结算页面" class="headerlink" title="结算页面"></a>结算页面</h2><h2 id="订单列表"><a href="#订单列表" class="headerlink" title="订单列表"></a>订单列表</h2><h2 id="个人中心"><a href="#个人中心" class="headerlink" title="个人中心"></a>个人中心</h2><h2 id="意见反馈"><a href="#意见反馈" class="headerlink" title="意见反馈"></a>意见反馈</h2>
    </div>

    
    
    

      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/08/06/%E5%9B%BE%E7%89%87%E6%B5%8B%E8%AF%95/" rel="prev" title="图片测试">
      <i class="fa fa-chevron-left"></i> 图片测试
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/09/19/%E9%9D%A2%E8%AF%95--js%E9%83%A8%E5%88%86/" rel="next" title="前端进阶">
      前端进阶 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#基础"><span class="nav-number">1.</span> <span class="nav-text">基础</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#配置文件"><span class="nav-number">1.1.</span> <span class="nav-text">配置文件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#全局配置文件"><span class="nav-number">1.1.1.</span> <span class="nav-text">全局配置文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#tabBar"><span class="nav-number">1.1.1.1.</span> <span class="nav-text">tabBar</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#页面配置文件"><span class="nav-number">1.1.2.</span> <span class="nav-text">页面配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#sitemap"><span class="nav-number">1.1.3.</span> <span class="nav-text">sitemap</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WXML语法"><span class="nav-number">1.2.</span> <span class="nav-text">WXML语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#数据绑定"><span class="nav-number">1.2.1.</span> <span class="nav-text">数据绑定</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#运算"><span class="nav-number">1.2.2.</span> <span class="nav-text">运算</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#列表渲染"><span class="nav-number">1.2.3.</span> <span class="nav-text">列表渲染</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#条件渲染"><span class="nav-number">1.2.4.</span> <span class="nav-text">条件渲染</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件绑定"><span class="nav-number">1.3.</span> <span class="nav-text">事件绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WXSS语法"><span class="nav-number">1.4.</span> <span class="nav-text">WXSS语法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#自定义组件"><span class="nav-number">1.5.</span> <span class="nav-text">自定义组件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#创建一个自定义组件"><span class="nav-number">1.5.1.</span> <span class="nav-text">创建一个自定义组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用自定义组件"><span class="nav-number">1.5.2.</span> <span class="nav-text">使用自定义组件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#小程序生命周期"><span class="nav-number">1.6.</span> <span class="nav-text">小程序生命周期</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#应用生命周期"><span class="nav-number">1.7.</span> <span class="nav-text">应用生命周期</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#项目"><span class="nav-number">2.</span> <span class="nav-text">项目</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#项目搭建"><span class="nav-number">2.1.</span> <span class="nav-text">项目搭建</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#技术选型"><span class="nav-number">2.1.1.</span> <span class="nav-text">技术选型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#具体步骤"><span class="nav-number">2.1.2.</span> <span class="nav-text">具体步骤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#样式的初始化"><span class="nav-number">2.1.3.</span> <span class="nav-text">样式的初始化</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#商品首页"><span class="nav-number">2.2.</span> <span class="nav-text">商品首页</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#搜索"><span class="nav-number">2.2.1.</span> <span class="nav-text">搜索</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#轮播"><span class="nav-number">2.2.2.</span> <span class="nav-text">轮播</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#通过-promise-优化网络请求"><span class="nav-number">2.2.2.1.</span> <span class="nav-text">通过 promise 优化网络请求</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#导航"><span class="nav-number">2.2.3.</span> <span class="nav-text">导航</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#主体内容"><span class="nav-number">2.2.4.</span> <span class="nav-text">主体内容</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#商品列表"><span class="nav-number">2.3.</span> <span class="nav-text">商品列表</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#购物车"><span class="nav-number">2.4.</span> <span class="nav-text">购物车</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#授权页面"><span class="nav-number">2.5.</span> <span class="nav-text">授权页面</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#商品搜索"><span class="nav-number">2.6.</span> <span class="nav-text">商品搜索</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#商品收藏"><span class="nav-number">2.7.</span> <span class="nav-text">商品收藏</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#商品分类"><span class="nav-number">2.8.</span> <span class="nav-text">商品分类</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#商品详情"><span class="nav-number">2.9.</span> <span class="nav-text">商品详情</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#结算页面"><span class="nav-number">2.10.</span> <span class="nav-text">结算页面</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#订单列表"><span class="nav-number">2.11.</span> <span class="nav-text">订单列表</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#个人中心"><span class="nav-number">2.12.</span> <span class="nav-text">个人中心</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#意见反馈"><span class="nav-number">2.13.</span> <span class="nav-text">意见反馈</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Edison</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">124</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">19</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
</div>
  <div class="powered-by">山高水远  一定相见
  </div>
<div></div>
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">至今已写107.1k字</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

</body>
</html>
